<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本转链接工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .drop-zone {
            border: 2px dashed #4a90e2;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            background-color: #fff;
            transition: all 0.3s ease;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .drop-zone.dragover {
            background-color: #e3f2fd;
            border-color: #2196f3;
        }

        .drop-zone p {
            margin: 0;
            color: #666;
            font-size: 16px;
        }

        .links-container {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .links-container a {
            display: block;
            padding: 8px 0;
            color: #2196f3;
            text-decoration: none;
            border-bottom: 1px solid #eee;
        }

        .links-container a:hover {
            color: #1976d2;
            background-color: #f5f5f5;
        }

        .error {
            color: #f44336;
            padding: 10px;
            margin: 10px 0;
            background-color: #ffebee;
            border-radius: 4px;
            display: none;
        }

        .button-container {
            margin-top: 20px;
            text-align: right;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .export-button, .open-html-button {
            display: none;
        }

        .export-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .export-html-button {
            background-color: #2196F3;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .open-html-button {
            background-color: #FF9800;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .export-button:hover {
            background-color: #45a049;
        }

        .export-button:active {
            background-color: #3d8b40;
        }

        .export-html-button:hover {
            background-color: #1976D2;
        }

        .export-html-button:active {
            background-color: #1565C0;
        }

        .open-html-button:hover {
            background-color: #F57C00;
        }

        .open-html-button:active {
            background-color: #EF6C00;
        }
    </style>
</head>
<body>
    <h1>文本转链接工具</h1>
    <div class="drop-zone" id="dropZone">
        <p>将 TXT 文件拖放到此处</p>
    </div>
    <div class="error" id="error"></div>
    <div class="links-container" id="linksContainer"></div>
    <div class="button-container">
        <button class="open-html-button" id="openHtmlButton">在新页面打开HTML</button>
        <button class="export-html-button" id="exportHtmlButton">导出此页面</button>
        <button class="export-button" id="exportButton">导出书签文件</button>
    </div>

    <script>
        const dropZone = document.getElementById('dropZone');
        const linksContainer = document.getElementById('linksContainer');
        const errorElement = document.getElementById('error');

        // 阻止默认的拖放行为
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, preventDefaults, false);
            document.body.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        // 添加拖放视觉反馈
        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, () => {
                dropZone.classList.add('dragover');
            });
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, () => {
                dropZone.classList.remove('dragover');
            });
        });

        // 处理文件拖放
        dropZone.addEventListener('drop', handleDrop);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;

            handleFiles(files);
        }

        function handleFiles(files) {
            if (files.length === 0) return;
            
            const file = files[0];
            if (file.type !== 'text/plain') {
                showError('请上传 TXT 文件');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const text = e.target.result;
                // 检查是否为HTML内容
                if (isHtmlContent(text)) {
                    processHtml(text);
                } else {
                    processLinks(text);
                }
            };
            reader.onerror = function() {
                showError('读取文件时发生错误');
            };
            reader.readAsText(file);
        }

        function isHtmlContent(text) {
            // 检查是否包含HTML基本标记
            const htmlPatterns = [
                /<\s*html/i,
                /<\s*body/i,
                /<\s*head/i,
                /<\s*div/i,
                /<\s*p>/i,
                /<\s*a\s+href/i
            ];
            return htmlPatterns.some(pattern => pattern.test(text));
        }

        function processHtml(html) {
            // 清空之前的内容和错误信息
            linksContainer.innerHTML = '';
            hideError();
            
            // 显示HTML预览
            linksContainer.innerHTML = '<div style="padding: 10px; background-color: #e3f2fd; border-radius: 4px; margin-bottom: 10px;">检测到HTML内容</div>';
            
            // 存储HTML内容供后续使用
            window.htmlContent = html;
            
            // 显示打开HTML按钮，隐藏导出书签按钮
            document.getElementById('openHtmlButton').style.display = 'inline-block';
            document.getElementById('exportButton').style.display = 'none';
        }

        // 添加打开HTML按钮的事件监听器
        document.getElementById('openHtmlButton').addEventListener('click', function() {
            if (window.htmlContent) {
                const blob = new Blob([window.htmlContent], { type: 'text/html' });
                const url = URL.createObjectURL(blob);
                window.open(url, '_blank');
                // 延迟释放URL
                setTimeout(() => URL.revokeObjectURL(url), 1000);
            }
        });

        function processLinks(text) {
            // 清空之前的内容和错误信息
            linksContainer.innerHTML = '';
            hideError();
            exportButton.style.display = 'none';

            // 使用正则表达式匹配URL
            const urlRegex = /(https?:\/\/[^\s]+)/g;
            const urls = text.match(urlRegex);

            if (!urls || urls.length === 0) {
                showError('未找到任何链接');
                return;
            }

            // 创建链接元素
            urls.forEach(url => {
                const link = document.createElement('a');
                link.href = url;
                link.textContent = url;
                link.target = '_blank';
                link.rel = 'noopener noreferrer';
                linksContainer.appendChild(link);
            });

            // 显示导出按钮
            exportButton.style.display = 'inline-block';
        }

        exportButton.addEventListener('click', function() {
            // 收集所有链接
            const links = Array.from(linksContainer.getElementsByTagName('a'));
            if (links.length === 0) return;

            // 生成书签文件内容
            const bookmarkContent = `<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
    <DT><H3>导入的链接</H3>
    <DL><p>
        ${links.map(link => `        <DT><A HREF="${link.href}">${link.href}</A>`).join('\n')}
    </DL><p>
</DL>`;

            // 创建并下载文件
            const blob = new Blob([bookmarkContent], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'bookmarks.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        exportHtmlButton.addEventListener('click', function() {
            // 获取当前页面的HTML内容
            const htmlContent = document.documentElement.outerHTML;
            
            // 创建并下载文件
            const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'txt2html.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        function showError(message) {
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        function hideError() {
            errorElement.style.display = 'none';
        }
    </script>
</body>
</html> 